<template>
  <div>
      <h4>简易计算器</h4>
      <p>工资组成：基本+绩效+全勤奖（200）</p>
      基本:<input type="text" v-model="basic"><br>
      绩效:<input type="text" v-model="kpi"><br>
      全勤奖: <select name="" v-model="kaoqin">
          <option value="1">是</option>
          <option value="2">否</option>
      </select>{{kaoqin}}
      <br>
      <button @click="getGongZi">计算工资</button>
      <br>
      <h3>您8月的工资是:{{money|currency}}</h3>
  </div>
</template>

<script>
export default {
    data(){
        return {
          //表单的值会同步到变量中
          basic:0,
          kpi:0,
          kaoqin:2, //值为2的选中
          money:0 //工资
        }
    },
    methods:{
        getGongZi(){
            // 是全勤，就200奖金
            this.money = Number(this.basic) + Number(this.kpi)+(this.kaoqin ==1 ? 200 : 0);
        }
    },
    filters:{
        // 自定义过滤器，格式化数据
        currency(val){
            return val.toFixed(2);// 999 -> 99.00
        }
    }
}
</script>

<style>

</style>